<template>
    <div class="container">
        <div class="opt-area-02">
            <div class="left-con">
                上报总数: <span>{{countData.gjnum}} 条</span> |
                待分配数量:<span>{{countData.dfpNum}} 条</span>
                已分配数量: <span>{{countData.yfpNum}} 条</span> |
                已交接数量: <span>{{countData.yjsNum}} 条</span> |
                已驳回数量: <span>{{countData.ybhNum}} 条</span> |
                上报总人数: <span>{{totalPeopleNum}} 人</span>
            </div>
            <div class="right-con">
                <div class="input-frame">
                    <Select v-model="params.state" style="width:200px" @on-change="selectlist">
                        <Option value="">全部</Option>
                        <Option value="1">待分配</Option>
                        <Option value="2">待交接</Option>
                        <Option value="3">已交接</Option>
                        <Option value="4">已驳回</Option>
                    </Select>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-enter="selectlist()"  @on-click="selectlist()" placeholder="输入企业名称" v-model="params.work_name"
                           icon="ios-search"/>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-enter="selectlist()"  @on-click="selectlist()" placeholder="输入全宗号" v-model="params.record_number"
                           icon="ios-search"/>
                </div>
                <div class="btn-frame">
                    <Button class="table-action-btn" type="info" @click="spotCheck()">抽查</Button>
                </div>
                <div class="btn-frame">
                    <Button class="table-action-btn" type="error" @click="rejectSelect()">批量驳回</Button>
                </div>
            </div>
        </div>
        <Table :loading="countData.loading" border :columns="tableColumn" :data="tableData" size="small"
               @on-selection-change="selectList">
            <template slot-scope="{ row }" slot="state">
                <div v-if="row.state == 1">待分配</div>
                <div v-if="row.state == 2">待交接</div>
                <div v-if="row.state == 3">已交接</div>
                <div v-if="row.state == 4">已驳回</div>
            </template>
            <template slot="action" slot-scope="{ row }">
                <Button v-if="row.state == 1 || row.state ==2|| row.state == 3" class="table-action-btn" type="success" size="small"
                        @click="allocation(row)">{{row.state === '1' ? '分配交接流水号' :'修改交接流水号'}}
                </Button>
                <Button v-if="row.state == 1 || row.state == 2" class="table-action-btn" type="warning" size="small"
                        @click="reception(row)">接收档案
                </Button>
                <Button v-if="row.state == 1 || row.state == 2" class="table-action-btn" type="error" size="small"
                        @click="rejectAction(row)">驳回
                </Button>
                <Button class="table-action-btn" type="info" size="small" @click="detail(row)">详情</Button>
            </template>
        </Table>
        <Row type="flex" justify="end" class="page_style">
            <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                  show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Modal
                v-model="allocationModal"
                title="分配流水号"
                @on-ok="allocationok">
            <p>转送档案数量：<span style="font-size: 20px;margin-left: 5px">{{this.row.people_num}}</span></p>
            <p style="margin-top: 10px">
                请仔细输入流水号:
                <template>
                    <Input v-model="Zimu" style="width: 35px;margin: 0 10px"/>
                </template>
                <template>
                    <Input v-model="Num1" style="width: 100px;margin: 0 10px"/>
                </template>
                <Icon type="md-arrow-forward"/>
                <template>
                    <Input v-model="Num2" style="width: 100px;margin: 0 10px" disabled/>
                </template>
            </p>
        </Modal>
        <Modal
                v-model="receptionModal"
                title="接收档案"
                :loading="receptionLoading"
                @on-ok="receptionOk">
            <p>
                请仔细核查信息！确认操作！
            </p>
        </Modal>
        <Modal
                v-model="rejectModal"
                title="驳回档案"
                :loading="rejectLoading"
                @on-ok="rejectOk">
            <p style="text-align: center">
                确认将此批人员驳回么？
            </p>
        </Modal>
        <Modal
                width="1100"
                v-model="detailModalShow"
                title="转送档案列表">
            <detail-modal ref="detailModal" :recordId="detailRow.record_id" :type="detailType"
                          :receive-id="detailRow.id" @detailAction="getList"></detail-modal>
            <div slot="footer">
                <Button type="text" @click="detailModalShow = false">关闭</Button>
            </div>
        </Modal>
        <rn-option-modal :modalShow="rnOptionModalShow" :modal-width="400"></rn-option-modal>
        <spot-check-modal ref="spotCheckModel" :recordId="detailRow.record_id"></spot-check-modal>
    </div>
</template>

<script>
import {
  getRecordConnectionList,
  getRecordJSNum,
  getZSPeopleTotal,
  updateSerialNum,
  updateRecordStatus,
  updateRecordState
} from '@/api/record'
import DetailModal from './components/detail-modal/index'
import RnOptionModal from '@/components/rn-option-modal/index'
import SpotCheckModal from './components/spot-check-modal/index'

export default {
  components: {
    SpotCheckModal,
    RnOptionModal,
    DetailModal
  },
  data () {
    return {
      Zimu: '',
      Num1: '',
      Num2: '',
      allocationModal: false,
      receptionModal: false,
      rejectModal: false,
      detailModalShow: false,
      row: {},
      totalPeopleNum: 0,
      countData: { loading: true, gjnum: 0, dfpNum: 0, yfpNum: 0, yjsNum: 0, ybhNum: 0, totalPeopleNum: 0 },
      params: { work_name: '', type: '', pageNo: 1, pageSize: 10, totalRecord: 0, state: '', record_number: '' },
      tableColumn: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '企业名称', key: 'work_name', align: 'center' },
        { title: '全宗号', key: 'record_number', align: 'center' },
        { title: '上报人数', key: 'people_num', align: 'center' },
        { title: '上报状态', slot: 'state', align: 'center' },
        { title: '上报时间', key: 'create_time', align: 'center' },
        { title: '操作', align: 'center', minWidth: 180, slot: 'action' }
      ],
      tableData: [],
      detailRow: { record_id: '' },
      detailType: '',
      rnOptionModalShow: false,
      selectData: [],
      receptionLoading: true,
      rejectLoading: true
    }
  },
  methods: {
    spotCheck () {
      this.$refs.spotCheckModel.searchObj = {}
      this.$refs.spotCheckModel.tableData = []
      this.$refs.spotCheckModel.modelAction()
    },
    selectList (selection) {
      this.selectData = selection
    },
    rejectSelect () {
      const list = this.selectData
      const content = '共' + list.length + '批，请仔细核对后再操作！'
      // content = list.length === this.tableData.length ? '此操作将驳回全部' + list.length + '条数据，请仔细核对后再操作' : content
      if (list.length <= 0) {
        this.$Message.error('请选择要驳回的数据')
        return false
      }
      this.$Modal.confirm({
        title: '确认驳回选中数据吗？',
        content: content,
        loading: true,
        onOk: () => {
          this.rejectMulti()
        }
      })
    },
    async rejectMulti () {
      let tNum = 0
      let fNum = 0
      for (let i = 0; i < this.selectData.length; i++) {
        await updateRecordStatus({ record_id: this.selectData[i].id }).then(ret => {
          if (ret.data.errcode === 0) {
            tNum++
          } else {
            fNum++
          }
        })
      }
      if (tNum === this.selectData.length) {
        this.$Message.success('操作成功，成功 ' + tNum + ' 条')
      } else {
        this.$Message.error('操作失败，失败 ' + fNum + ' 条')
      }
      this.$Modal.remove()
      this.getList()
    },
    getRecordJSNum () {
      getRecordJSNum().then(ret => {
        if (ret.data.errcode === 0) {
          this.countData.gjnum = ret.data.data.gjNum
          this.countData.dfpNum = ret.data.data.dfpNum
          this.countData.yfpNum = ret.data.data.yfpNum
          this.countData.yjsNum = ret.data.data.yjsNum
          this.countData.ybhNum = ret.data.data.ybhNum
        }
      })
    },
    detail (row) {
      this.detailRow = row
      this.detailType = this.detailRow.state === '4' ? 'reject' : 'default'
      this.detailModalShow = true
      this.$refs.detailModal.getList()
      this.$refs.detailModal.getMaterialsNum()
    },
    receptionOk () {
      this.receptionLoading = true
      updateRecordState(this.row).then(ret => {
        if (ret.data.errcode === 0) {
          this.receptionLoading = false
          this.receptionModal = false
          this.$Message.success('操作成功')
          this.initAction()
        } else {
          this.receptionLoading = false
          this.receptionModal = false
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    rejectOk () {
      this.rejectLoading = true
      updateRecordStatus({ record_id: this.row.id }).then(ret => {
        if (ret.data.errcode === 0) {
          this.rejectLoading = false
          this.rejectModal = false
          this.$Message.success('操作成功')
          this.initAction()
        } else {
          this.rejectLoading = false
          this.rejectModal = false
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    reception (row) {
      this.row = row
      this.receptionModal = true
    },
    allocationok () {
      var nubmer = this.Num1
      if (isNaN(nubmer) || nubmer <= 0 || !(/^[1-9]\d*$/.test(nubmer))) {
        this.$Message.info('请输入正确的流水号，不能以0开始！')
        this.Num1 = ''
        this.Num2 = ''
      } else {
        let data = {
          Zimu: this.Zimu,
          beginNum: this.Num1,
          endNum: this.Num2,
          id: this.row.id,
          record_id: this.row.record_id
        }
        updateSerialNum(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Message.success('操作成功')
            this.initAction()
            this.Zimu = ''
            this.Num1 = ''
            this.Num2 = ''
          } else {
            this.$Message.error(ret.data.errmsg)
          }
        })
      }
    },
    allocation (row) {
      this.allocationModal = true
      this.row = row
    },
    rejectAction (row) {
      this.row = row
      this.rejectModal = true
    },
    pageAction (page) {
      this.params.pageNo = page
      this.initAction()
    },
    selectlist () {
      this.params.pageNo = 1
      this.params.type = this.type
      this.initAction()
    },
    initAction () {
      this.getList()
      // 采用前台页面计数方式（下面方法废弃）
      // this.getTotalNum()
    },
    getList () {
      getRecordConnectionList(this.params).then(res => {
        let result = res.data.data
        if (res.data.errcode === 0 || res.data.errcode === 1001) {
          this.getRecordJSNum()
          this.tableData = result.results
          this.params.pageNo = result.pageNo
          this.params.pageSize = result.pageSize
          this.params.totalPage = result.totalPage
          this.params.totalRecord = result.totalRecord
          this.totalPeopleNum = 0
          result.results.forEach(item => {
            if (item.people_num) this.totalPeopleNum += parseInt(item.people_num)
            if (item.state !== '1') item['_disabled'] = true
          })
          this.countData.loading = false
        } else {
          this.$Message.error(res.data.errmsg)
          this.countData.loading = false
        }
      })
    },
    getTotalNum () {
      getZSPeopleTotal(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.countData.totalPeopleNum = res.data.data.totalPeopleNum
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    }

  },
  mounted () {
    const RN = window.localStorage.getItem('record_number').trim()
    if (!RN || RN === 'undefined' || RN === 'null') {
      this.rnOptionModalShow = true
    } else {
      this.selectlist()
    }
    if (this.$route.params.options) {
      this.detailModalShow = true
      // console.log(this.$route.params.options, '接到的参数格式')
      this.detailRow.record_id = this.$route.params.options
      this.$refs.detailModal.getList()
    }
  },
  watch: {
    Num1 (value) {
      this.Num2 = value ? parseInt(value) + parseInt(this.row.people_num) : ''
    }
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .btn-frame {
        /*width: 120px;*/
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
        margin-bottom: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
</style>
